<template>
  <div :id="appStyle">
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { homeStore } from '@/store';
import { i18n } from '@/lang'
import { confirmTheme } from './theme'

onMounted(() => {
  confirmTheme(appStyle.value) // 默认使用深色主题
  if (i18n.global.locale === 'en') {
    document.body.style.setProperty('--main-font-size', '16px')
  } else if (i18n.global.locale === 'zh_cn') {
    document.body.style.setProperty('--main-font-size', '14px')
  }
})

const appStyle = computed(() => {
  return homeStore().appStyle
})

</script>


<style lang="less">
@import "./iconfont/iconfont.css";

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
}

#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-size: @mainFontSize;
  color: @mainFontColor;
}
</style>
